<template>
  <div class="my-check">
    <head-top head-title="我的查验" goBack="true"></head-top>
    <div class="separate">
      <ul class="clearfix">
        <li>
          <router-link to="/my/OrderList">
            <img src="./images/icon1@2x.png" alt="">
            <p>接单订单</p>
          </router-link>
        </li>
        <li>
          <router-link to="/my/ReceiptList">
            <img src="./images/icon2@2x.png" alt="">
            <p>发单订单</p>
          </router-link>
        </li>
        <li>
          <div @click="toOrderTake">
            <img src="./images/icon3@2x.png" alt="">
            <p>接单认证</p>
          </div>
        </li>
        <li>
          <div @click="toReceipt">
            <img src="./images/icon4@2x.png" alt="">
            <p>发单认证</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="check-main" v-if="checkList.length!==0">
      <div class="title_text">
        <span>查验列表</span>
      </div>
      <ul>
        <li v-for="(item, index) in checkList" :key="index" v-show="item.state===1">
          <div class="wrapper border-bottom" @click="$router.push(`/CheckDetail/${item.id}`)">
            <div class="bgimg" v-lazy:background-image="item.img[0]" v-show="item.img[0]"></div>
            <img src="../../assets/imgDefault.png" alt="" v-show="!item.img[0]">
            <div class="info">
              <div>
                <div class="title">{{item.project_name}}</div>
                <div class="liftnum" v-show="item.lift_num != '0'">电梯编号：{{item.lift_num}}</div>
                <div class="liftnum" v-show="item.fang_hao !== null && item.fang_hao!==''">房号：{{item.fang_hao}}</div>
                <div class="time">{{item.created_at*1000 | dateFmt('YYYY-MM-DD')}}</div>
              </div>
            </div>
          </div>
          <div class="edit-del">
            <div class="same">
              <p v-if="item.is_finish===1">状态：<span style="color: #1B701C">已完成</span></p>
              <button class="progress" v-if="item.is_finish===0" @click="changeStatus(item.id,item.is_finish)">
                <span>未完成</span>
              </button>
            </div>
            <div class="same" @click="editCheck(item.id, item.category_id, item.status)">
              <span class="edit"></span>编辑
            </div>
            <div class="same" @click="delSelectCheck(item.id)">
              <span class="del"></span>删除
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="no-checkList" v-show="noCheckList && checkList.length===0">
      <p>抱歉！暂无查验或已全部删除</p>
    </div>
  </div>
</template>

<script>
  import headTop from '../../components/header/Header.vue'
  import { getCheckList, delCheck, setFinish } from '../../api/my.js'
  import { Toast } from 'mint-ui'
  import { identStatus } from '../../api/MyOrder'

  export default {
    name: 'MyCheck',
    data () {
      return {
        checkList: [],
        noCheckList: false,
        stateList: [], // 存放所有state数据
        takeName: 'person', // 判断接单认证是否注册成功的type类型
        receName: 'publisher', // 判断发单认证是否注册成功的type类型
        takeStatus: '', // 用于存放接单人员认证状态
        receStatus: '', // 用于存放发单人员认证状态
        popupText: '', // 存放接单弹窗信息
        popupText2: '' // 存放弹发单窗信息
      }
    },
    components: {
      headTop
    },
    // 设置缓存从哪个页面回来（停留在点击进入详情页时的位置）
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'CheckDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._getCheckList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._getCheckList()
      // 判断接单认证是否注册成功
      identStatus(this.takeName).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.takeStatus = res.data.status
          this.popupText = res.data.message
        }
      })
      // 判断接单认证是否注册成功
      identStatus(this.receName).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.receStatus = res.data.status
          this.popupText2 = res.data.message
        }
      })
    },
    methods: {
      _getCheckList () {
        getCheckList().then(res => {
          if (res.code === 200) {
            this.checkList = res.data
            // console.log(this.checkList)
            this.checkList.forEach((item, index) => {
              // state = 1:表示有查验 state = 0：表示点击查验后没有进行查验
              this.stateList.push(item.state)
            })
            // 如果stateList里没有值(没有查验)则返回-1,也就是显示暂无查验或者已被删除
            if (this.stateList.indexOf(1) === -1) {
              this.noCheckList = true
            }
          }
        })
      },
      // 点击状态改变
      changeStatus (id, degree) {
        setFinish(id, degree).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1000
            })
            this._getCheckList()
          }
          if (res.code === 400) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1000
            })
            return false
          }
        })
      },
      // 编辑
      editCheck (id, gid, status) {
        // status =1 表示可以去编辑 status = 0:表示不可以去编辑
        if (status === 0) {
          Toast({
            message: '超过15天不可编辑',
            position: 'middle',
            duration: 1000
          })
          return
        }
        // 去到编辑页面需要传id和category_id分类id以及status状态值
        this.$router.push(`/my/EditCheck/${id}/${gid}`)
      },
      // 删除
      delSelectCheck (id) {
        delCheck(id).then(res => {
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1000
            })
            this._getCheckList()
          }
        })
      },
      // 跳转接单认证界面
      toOrderTake () {
        // 0：表示没有去认证   1：表示已经认证通过  4：表示认证还在审核中
        if (this.takeStatus === 0) {
          window.location.href = '/my/OrderTake'
        } else if (this.takeStatus === 1) {
          Toast({
            message: this.popupText,
            position: 'middle',
            duration: 3000
          })
        } else if (this.takeStatus === 4) {
          Toast({
            message: this.popupText,
            position: 'middle',
            duration: 3000
          })
        }
      },
      // 跳转发单认证界面
      toReceipt () {
        // 0：表示没有去认证   1：表示已经认证通过  4：表示认证还在审核中
        if (this.receStatus === 0) {
          window.location.href = '/my/Receipt'
        } else if (this.receStatus === 1) {
          Toast({
            message: this.popupText2,
            position: 'middle',
            duration: 3000
          })
        } else if (this.receStatus === 4) {
          Toast({
            message: this.popupText2,
            position: 'middle',
            duration: 3000
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .my-check {
    padding-top: 40px;
    .separate {
      width: 100%;
      height: 200px;
      border-bottom: 6px solid #f2f2f2;
      ul {
        li {
          width: 50%;
          height: 100px;
          float: left;
          list-style: none;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          text-align: center;
          border-bottom: 4px solid #f2f2f2;
          border-right: 4px solid #f2f2f2;
          div {
            img {
              width: 26px;
              height: 28px;
              padding: 14px 0;
            }
            p {
              padding-top: 5px;
              font-size: 14px;
              color: #292929;
            }
          }
          a {
            img {
              width: 26px;
              height: 28px;
              padding: 14px 0;
            }
            p {
              padding-top: 5px;
              font-size: 14px;
              color: #292929;
            }
          }
        }
        li:nth-of-type(2) {
          border-right: none;
        }
        li:nth-of-type(4) {
          border-right: none;
        }
      }
      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        display: inline-block;
      }
      * html .clearfix {
        height: 1%;
      }
      .clearfix {
        display: block;
      }
    }
    .no-checkList {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat #fff;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
    .check-main {
      .title_text {
        padding: 10px;
        height: 30px;
        border-bottom: 1px solid #d9d9d9;
        span {
          font-size: 15px;
          color: #292929;
          line-height: 30px;
        }
      }
      ul {
        padding-top: 5px;
        li {
          border-bottom: 10px solid #f2f2f2;
          .wrapper {
            display: flex;
            margin: 0 10px;
            padding: 5px 0;
            img {
              width: 56px;
              height: 56px;
              margin-right: 10px;
            }
            .bgimg {
              flex: 0 0 56px;
              margin-right: 10px;
              background-size: cover;
              background-repeat: no-repeat;
              width: 56px;
              height: 56px;
            }
            .info {
              flex: 1;
              display: flex;
              align-items: center;
              .title {
                font-size: 15px;
                // font-weight: 400;
              }
              .liftnum {
                margin-top: 10px;
                color: rgb(102, 102, 102)
              }
              .time {
                margin-top: 10px;
                color: rgb(153, 153, 153)
              }
            }
          }
          .edit-del {
            text-align: right;
            padding: 5px 10px;
            .progress{
              border: 1px solid #ce272d;
              background: #ffffff;
              font-size: 13px;
              color: #ce272d;
            }
            .same {
              display: inline-block;
              padding-right: 10px;
            }
            .edit {
              display: inline-block;
              width: 14px;
              height: 15px;
              background-size: 14px 15px;
              @include bgimg('./images/bianji');
              background-repeat: no-repeat;
              vertical-align: middle;
              margin-right: 5px;
            }
            .del {
              display: inline-block;
              width: 14px;
              height: 15px;
              background-size: 14px 15px;
              @include bgimg('./images/shuanchu');
              background-repeat: no-repeat;
              vertical-align: middle;
              margin-right: 5px;
            }
          }
        }
      }
    }

  }
</style>
